<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <img
          src="@/assets/logo.png"
          class="logo"
          style="float: left; height: 50px; margin: 5px"
          alt=""
        />
        <p class="title">酷鲨商城运营管理平台</p>
        <el-dropdown trigger="click" class="userDropdown" @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-user"></i>
            {{$store.state.userInfo && $store.state.userInfo.nickname}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-user" command="PersonalCenter">个人中心</el-dropdown-item>
            <el-dropdown-item icon="el-icon-setting" command="Settings">设置</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-close" command="Quit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container class="container">
        <el-aside width="201px" class="scroll aside">
          <!-- 侧边栏导航 -->
          <el-menu
            background-color="#1aa"
            text-color="#fff"
            active-text-color="#fff"
            router
            unique-opened
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            style="border-right: none"
          >
            <el-menu-item index="/home/index">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="/home/product">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span slot="title">商品管理</span>
              </template>
              <el-menu-item index="/home/product/spumanage">
                <i class="el-icon-s-platform"></i>
                SPU台账
              </el-menu-item>

              <el-menu-item index="/home/product/addspu/1">
                <i class="el-icon-circle-plus"></i>
                新增SPU
              </el-menu-item>

              <el-menu-item index="/home/product/albummanage">
                <i class="el-icon-picture"></i>
                相册管理
              </el-menu-item>
              <el-menu-item index="/home/product/category">
                <i class="el-icon-s-grid"></i>
                商品类别
              </el-menu-item>
              <el-menu-item index="/home/product/attributetemplatemanage">
                <i class="el-icon-s-order"></i>
                属性模板
              </el-menu-item>
              <el-menu-item index="/home/product/brandmanage">
                <i class="el-icon-s-check"></i>
                品牌管理
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="/home/dingdan">
              <i class="el-icon-menu"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="/home/yingxiao">
              <i class="el-icon-document"></i>
              <span slot="title">营销管理</span>
            </el-menu-item>
            <el-menu-item index="/home/shangjia">
              <i class="el-icon-setting"></i>
              <span slot="title">商家管理</span>
            </el-menu-item>
            <el-submenu index="/home/auth">
              <template slot="title">
                <i class="el-icon-s-operation"></i>
                <span slot="title">权限设置</span>
              </template>
              <el-menu-item index="/home/auth/userlist">
                <i class="el-icon-s-custom"></i>
                用户列表
              </el-menu-item>
              <el-menu-item index="/home/auth/rolelist">
                <i class="el-icon-video-camera-solid"></i>
                角色列表
              </el-menu-item>
              <el-menu-item index="/home/auth/permissionlist">
                <i class="el-icon-s-ticket"></i>
                资源列表
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main class="scroll">
          <router-view :key="$route.fullPath" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      isCollapse: false,
    };
  },
  methods: {

    /** 处理点击用户下拉菜单命令 */
    handleCommand(command){
      if(command=='Quit'){
        this.quit()
      }
    },

    /** 退出登录 */
    quit(){
      // 向vuex提交mutations，退出登录
      this.$store.commit('logout')
      // 回到登录页
      this.$router.push('/user/login')
    }
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.scroll::-webkit-scrollbar {
  width: 8px;
}
.scroll::-webkit-scrollbar-track {
  background-color: #eee;
}
.scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.box {
  padding: 15px;
  border: 1px solid #eee;
  margin: 20px 0px;
}
.whererow .label {
  margin-bottom: 10px;
}
.whererow {
  margin-top: 20px;
}
.divider {
  border-top: 1px solid #eee;
  margin: 20px 0px;
}
.noticerow {
  padding: 10px 15px;
  border: 1px solid #1aa;
  background-color: #1aa4;
}
.el-pagination {
  float: right;
}
.pagination {
  padding: 20px;
}
.beizhu {
  font-size: 0.9em;
  color: #999;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px !important;
  text-align: center;
}
.avatar {
  min-width: 130px;
  height: 130px;
  display: block;
}
</style>

<style scoped>
.header {
  background-color: #1aa;
  line-height: 60px;
}
.header .logo {
  height: 50px;
  margin: 5px;
}
.header .userDropdown {
  float: right;
  margin-right: 10px;
  color: #fff;
}
.header .title {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu-item.is-active {
  font-weight: bold;
}
.el-menu i {
  color: #fff;
}
.container {
  position: fixed;
  top: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.aside {
  background-color: #1aa;
  overflow-x: hidden;
  border-right: 1px solid #eee;
}
</style>
